<template>
  <div class="choosetheformat">
    <header
      class="header"
      style="border-bottom: 1px solid #ededed; position: fixed; z-index: 999"
    >
      <nav class="container flex-container">
        <div class="flex-item logo">
          <div style="line-height: 30px">
            <img
              style="height: 44px; display: inline-table"
              src="../assets/images/logo/logo3.png"
              alt="千兰"
            />
            <span class="newLogo-right">商家中心</span>
          </div>
        </div>
        <div class="flex-item">
          <div>
            <ul class="nav">
              <li index="1" style="color: #808080">联系我们</li>
              <li index="4" style="color: #808080">常见问题</li>
              <li index="4" style="color: #808080">服务商入驻</li>
              <li index="4" style="color: #808080" @click="logout">注销</li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

    <div class="container2" style="padding-top: 100px">
      <el-card class="box-card" style="width: 100%">
        <div slot="header" class="clearfix">
          <span>门店列表</span>
          <span class="el-icon-refresh" style="cursor: pointer"></span>
          <el-button
            @click="addStore()"
            v-if="this.role !== 1"
            style="float: right; padding: 3px 0"
            type="text"
            >新建门店</el-button
          >
          <el-form
            style="margin-top: 10px"
            :inline="true"
            class="demo-form-inline"
          >
            <el-form-item label-width="0">
              <el-input placeholder="名称/联系人/电话/地址"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                v-if="this.role === 1"
                @click="adminTotal"
                >进入总部</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div v-if="dataList.length == 0" style="text-align: center">
          <i
            class="el-icon-document"
            style="font-size: 50px; margin: 28px 0px 18px 0px"
          ></i>
          <p style="margin-bottom: 18px">
            空空如也，<el-button @click="creatStoresHandle" type="text"
              >立即创建</el-button
            >
          </p>
        </div>
        <el-row>
          <el-col
            :span="10"
            v-for="(item, index) in dataList"
            :key="index"
            :offset="index % 2 == 0 ? 1 : 2"
            style="margin-bottom: 20px"
          >
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div style="overflow: hidden; height: 100px; margin: 10px">
                    <img
                      :src="item.ewmLogo"
                      class="image"
                      v-if="item.ewmLogo"
                    />
                    <img
                      src="../assets/images/store/no-img1.png"
                      class="image"
                      v-else
                    />
                  </div>
                </el-col>
                <el-col :span="16">
                  <div style="padding: 14px">
                    <span>{{ item.name }}</span>
                    <div class="bottom clearfix">
                      <p class="time">{{ item.address }}</p>
                      <!-- 1待审核,2通过，3拒绝-->
                      <el-button
                        type="text"
                        class="button"
                        v-if="item.status == 2"
                        @click="adminSeller(item)"
                        >进入管理</el-button
                      >
                      <el-button
                        type="text"
                        class="button"
                        v-if="item.status == 1"
                        disabled
                        >待审核</el-button
                      >
                      <el-popover
                        v-if="item.status == 3"
                        placement="top"
                        trigger="hover"
                        width="160"
                      >
                        <p style="line-height: 20px; margin-bottom: 10px">
                          {{ item.stateMsg ? item.stateMsg : "暂无原因" }}
                        </p>
                        <div style="text-align: right">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="againSubmit(item)"
                            >重新提交</el-button
                          >
                        </div>
                        <el-button
                          slot="reference"
                          type="text"
                          class="button"
                          v-if="item.state == 3"
                        >
                          审核失败
                          <i class="el-icon-question"></i>
                        </el-button>
                      </el-popover>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- <add-or-update ref="addOrUpdate" v-if="addOrUpdateVisible"></add-or-update> -->
  </div>
</template>
<script>
import { clearLoginInfo } from "@/utils";
// import AddOrUpdate from "./tstoreseller-add-or-update";
export default {
  data() {
    return {
      role: "",
      dataList: [],
      addOrUpdateVisible: false,
      storeForm: {
        name: "",
      },
    };
  },

  components: {
    AddOrUpdate,
  },

  created() {
    this.getDataList();
  },

  methods: {
    /**
     * 进入总部（管理员权限）
     */
    adminTotal() {
      this.$cookie.set("seller", this.role);
      this.$router.replace({ name: "home" });
    },

    /**
     * @param item
     */
    adminSeller(item) {
      this.$cookie.set("sellerInfo", JSON.stringify(item));
      this.$cookie.set("seller", item.sellerId);
      //保存当班信息
      this.$http({
        url: this.$http.adornUrl("/keepChangeWorkInfo"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.role = data.role;
          this.dataList = data.list;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
      });
      //获取抹零规则
      this.$http({
        url: this.$http.adornUrl("/store/storewipezerorule/info"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then((res) => {
        this.$cookie.set("zeroStatus", res.data.storeWipeZeroRule.zeroStatus);
        this.$cookie.set("rule", res.data.storeWipeZeroRule.rule);
      });
      this.$router.replace({ name: "home" });
    },

    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/store/tstoreseller/listByUserId"),
        method: "get",
        params: this.$http.adornParams({
          page: 1,
          limit: 100,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$cookie.set("roleId", data.role);
          this.role = data.role;
          this.dataList = data.list;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
      });
    },
    /**
     *
     */
    // 新增 / 修改
    addStore() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(0);
        this.getDataList();
      });
    },
    /**
     * 注销
     */
    logout() {
      this.$confirm(`确定进行[注销]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sys/logout"),
            method: "post",
            data: this.$http.adornData(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              clearLoginInfo();
              this.$cookie.delete("sellerInfo");
              this.$cookie.delete("seller");
              this.$router.push({ name: "login" });
            }
          });
        })
        .catch(() => {});
    },
  },

  mounted() {
    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function () {
      history.pushState(null, null, document.URL);
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  width: 100%;
  padding: 0 130px;
}
.header {
  width: 100%;
  height: 60px;
  line-height: 70px;
  background-color: white;
  //background: linear-gradient(to right, #0154af 0%, #049ad7 100%)
}
.flex-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .flex-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32px;
    &.logo {
      // width: 60px;
      // height: 60px;
    }
    img {
      display: block;
      max-width: 100%;
    }
  }
}
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  font-size: 14px;

  li {
    cursor: pointer;
    min-width: 50px;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    &:first-child {
      border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
}
.newLogo-right {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  width: 156px;
  display: inline-block;
  border-left: 1px solid #ccc;
  color: #888;
  padding-left: 12px;
  margin-left: -8px;
  vertical-align: middle;
}

ul li {
  list-style-type: none;
}

.container2 {
  width: 1200px;
  margin: 0 auto;
}

#granted-hotels {
  margin-bottom: 1em;
}

#granted-hotels li {
  float: left;
  margin-left: 1em;
  margin-top: 20px;
}

#granted-hotels li a {
  background-color: #599bb3;
  border-radius: 15px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 32px 32px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #3d768a;
}

.choosetheformat .time {
  font-size: 13px;
  width: 70%;
  line-height: 25px;
  color: #999;
}

.choosetheformat .bottom {
  margin-top: 13px;
  line-height: 12px;
}

.choosetheformat .button {
  padding: 0;
  float: right;
}

.choosetheformat .image {
  width: 100%;
  display: block;
}

.choosetheformat .clearfix:before,
.choosetheformat .clearfix:after {
  display: table;
  content: "";
}

.choosetheformat .clearfix:after {
  clear: both;
}

.choosetheformat .el-tabs__header.is-top {
  margin-bottom: 0;
}

.choosetheformat .el-card.box-card {
  border-top: none;
}

.choosetheformat .demo-form-inline .el-form-item {
  margin-bottom: 0px;
}
</style>
